<template>
  <a-card hoverable class="cover" size="small">
    <template #cover>
      <a-image :src="filelink" />
    </template>
    <a-card-meta class="meta" size="small" :style="{ paddingTop: '0px' }">
      <template #description>
        <div v-if="myTagList">
          <a-tag
            v-for="(tag, index) in myTagList"
            :key="index"
            :color="tagColor[index % 5]"
            >{{ tag.split(':')[1] }}</a-tag
          >
        </div>
        <span>{{ albumName }}</span>
      </template>
    </a-card-meta>

    <a-modal v-model:visible="moveVisible" title="移动照片至其他相册">
      <a-form :model="moveAlbumState">
        <a-form-item
          label="目标相册"
          name="targetAlbumId"
          :rules="[{ required: true, message: '请选择要合并到的相册!' }]"
        >
          <a-select
            v-model:value="moveAlbumState.targetAlbumId"
            placeholder="请选择相册"
          >
            <a-select-option
              v-for="(album, index) in optionAlbumList"
              :key="index"
              :value="album.albumId"
              >{{ album.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" @click="cancelMove()">取消</a-button>
        <a-button key="submit" type="primary" @click="move()">提交</a-button>
      </template>
    </a-modal>

    <a-modal v-model:visible="addTagVisible" title="添加标签">
      <a-form :model="addTagState">
        <a-form-item
          label="标签"
          name="tagId"
          :rules="[{ required: true, message: '请选择标签!' }]"
        >
          <a-select v-model:value="addTagState.tagId" placeholder="请选择标签">
            <a-select-option
              v-for="(tag, index) in optionTagList"
              :key="index"
              :value="tag.tagId"
              >{{ tag.tagName }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button key="back" @click="cancelAddPicTag()">取消</a-button>
        <a-button key="submit" type="primary" @click="addPicTag()"
          >提交</a-button
        >
      </template>
    </a-modal>
  </a-card>
</template>

<style scoped lang="less">
.cover {
  width: 250px;
  border-radius: 10px;
  border: none;
  :global(.cover .ant-card-cover img) {
    border: 1px solid #f0f0f0;
    border-radius: 10px;
  }
}

.meta {
  text-align: left;
  // :global(.ant-card-small > .ant-card-body) {
  //   padding-top: 4px;
  // }
}
</style>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  components: {},
  props: [
    'picid',
    'albumid',
    'filesize',
    'filelink',
    'filename',
    'tags',
    'albumName'
  ],
  setup(props, { emit }) {
    const tagColor = ['pink', 'red', 'orange', 'green', 'purple'];

    const myTagList = ref<Array<string>>(
      props.tags === null ? [] : props.tags.split(',')
    );

    return {
      myTagList,
      tagColor
    };
  }
});
</script>
